<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS3 边界图片</title>
    <style>
        div {
            border: 15px solid transparent;
            width: 250px;
            padding: 10px 20px;
        }

        #round {
            /* Safari 5 and older */
            -webkit-border-image: url('images/border.png') 30 30 round;
            /* Opera */
            -o-border-image: url('images/border.png') 30 30 round;
            border-image: url('images/border.png') 30 30 round;
        }

        #stretch {
            /* Safari 5 and older */
            -webkit-border-image: url('images/border.png') 30 30 stretch;
            /* Opera */
            -o-border-image: url('images/border.png') 30 30 stretch;
            border-image: url('images/border.png') 30 30 stretch;
        }
    </style>
</head>

<body>

    <p><b>注意: </b> Internet Explorer 不支持 border-image 属性。</p>
    <p> border-image 属性用于设置图片的边框。</p>

    <div id="round">这里，图像平铺（重复）来填充该区域。</div>
    <br>
    <div id="stretch">这里，图像被拉伸以填充该区域。</div>

    <p>这是我们使用的图片素材：</p>
    <img src="images/border.png" />

</body>

</html>